<template>
  <div>
    <Header :left="true" leftText="返回" title="箱线图" />
    <div id="main" ref="main" style="width: 100%; height: 800px"></div>
  </div>
</template>

<script>
import {
  Search,
  Toast,
  Icon,
  Row,
  Col,
  NoticeBar,
  ActionSheet,
  Image as VanImage,
  Dialog,
  PullRefresh,
  Grid,
  GridItem,
} from "vant";


import * as echarts from "echarts";
import Header from "@/components/header.vue";
import dataTool from "echarts/extension/dataTool";
export default {
  name: "laboratoryTestDataItem01",
  components: { Search, Icon, Col, Row, Toast, NoticeBar, ActionSheet, Header },
  data() {
    return {
      RecordValueList: [],
      RecordAvg: "",
      RecordStandardDeviatio: "",
      RecordMax: "",
      top:0,
      bottom:0
    };
  },
  created() {
    
 
    api.showProgress({
       title: '生成中...',
       text: '箱线图生成中...',
   });
  
 
  },
  mounted() {
        this.RecordValueList = api.pageParam.RecordValueList.map(Number);
        this.RecordAvg = this.countAvg(this.RecordValueList);
        this.RecordStandardDeviatio = this.countStandardDeviation(
          this.RecordValueList
        );
      
        this.RecordMax = this.counMax(this.RecordValueList);
        this.countMin(this.RecordValueList)
          var myChart = echarts.init(main);
          
          // myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
          var data = echarts.dataTool.prepareBoxplotData([this.RecordValueList]);
          let option = {
            title: [
              {
                text: "",
                left: "center",
                textStyle: {
                  fontSize: 20,
                  color: "green",
                },
              },
            ],
            tooltip: {
              trigger: "item", //触发类型,数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
              axisPointer: {
                //指示器类型。
                type: "shadow",
              },
            },
            grid: {
              //直角坐标系网格。
              //show: true,//default: false
              left: "10%",
              right: "10%",
              bottom: "15%",
              //borderWidth: 1,
              //borderColor: '#000',
            },
            xAxis: {
              type: "category", //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
              show: false,
            },
            yAxis: {
              min: this.bottom,
	            max: this.top,
              
            },
            series: [
              {
                name: "boxplot", //箱线图
                type: "boxplot",
                hoverAnimation: true,
                itemStyle: {
                  borderColor: "#108EE9", //boxplot图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
                },
                data: data.boxData,
                tooltip: {
                  formatter: function (param) {
                    return [
                      "最大值: " + param.data[5].toFixed(3),
                      "Q3: " + param.data[4].toFixed(3),
                      "中位数: " + param.data[3].toFixed(3),
                      "Q1: " + param.data[2].toFixed(3),
                      "最小值: " + param.data[1].toFixed(3),
                    ].join("<br/>");
                  },
                },
              },
              {
                name: "异常值", //异常值
                type: "scatter", //分散
                data: data.outliers,
              },
            ],
          };

          // console.log(data.outliers, "异常值");
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          api.hideProgress();

  },
  methods: {
    //求数组平均值
    countAvg(arr) {
      var sum = 0;
      var average = 0;
      for (var i = 0; i < arr.length; i++) {
        sum = arr[i] + sum;
      }
      average = sum / arr.length;
      return average.toFixed(3);
    },
    //求数组标准差
    countStandardDeviation(arr) {
      var sampleAvg = this.countAvg(arr);
      var length = arr.length;
      var temp = new Array(length); //定义一个临时空数组，用来存储每个数组元素与平均值的差的平方。
      for (var i = 0; i < length; i++) {
        var dev = parseFloat(arr[i]) - sampleAvg; //计算数组元素与平均值的差
        temp[i] = Math.pow(dev, 2); //计算差的平方
      }
      var powSum = 0; //用来存储差的平方总和
      for (var j = 0; j < temp.length; j++) {
        if (temp[j].toString() != "" || temp[j].toString() != null) {
          powSum = parseFloat(powSum) + parseFloat(temp[j].toString()); //计算差的平方总和
        }
      }
      return Math.sqrt(parseFloat(powSum) / parseFloat(length)).toFixed(3); //用差的平方总和除以数组长度即可得到标准差
    },
    //求数组最大值
    counMax(arr) {
      var max = arr[0];
      for (var i = 1; i < arr.length; i++) {
        if (max < arr[i]) {
          max = arr[i];
        }
      }
      this.top=Math.ceil(max)+5
      return max.toFixed(3);
    },

    countMin(arr){
      var min = arr[0];
      for (var i = 1; i < arr.length; i++) {
        if (min > arr[i]) {
          min = arr[i];
        }
      }
      this.bottom=(Math.floor(min)-5)>=0?(Math.floor(min)-5):0;
      return min.toFixed(3);
    }
  },
};
</script>

<style scoped>
</style>